<template>
    <el-breadcrumb style="margin: 20px;" separator="/">
        <el-breadcrumb-item @click="backHome" >根目录</el-breadcrumb-item>
        <el-breadcrumb-item v-for="item in params.folder_name.split('/')" @click="clickBreadcrumb(item)" >{{ item }}</el-breadcrumb-item>
    </el-breadcrumb>
    <el-scrollbar>
        <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" show-overflow-tooltip
            @selection-change="handleSelectionChange">
            <!-- <el-table-column type="selection" :selectable="selectable" width="55" /> -->
            <template v-for="item in Tbconfig.xhsCooti.items ">
                <el-table-column :prop=item.prop :label=item.label width="400">
                    <template v-slot="label_scope" v-if="item.scope == 'label_scope'">
                        <span v-if="label_scope.row.name.indexOf('.') == -1" @click="clickGet(label_scope.row.name)">{{
                            label_scope.row.name }}</span>
                        <a v-else target="_blank"
                            :href="`https://xhs-cooti.oss-cn-hangzhou.aliyuncs.com/${params.folder_name}${label_scope.row.name}`">{{
                                label_scope.row.name }}</a>
                    </template>
                </el-table-column>
            </template>
        </el-table>
    </el-scrollbar>
</template>

<script setup>
import { onMounted, ref, reactive } from 'vue'
import api from '@/api/index.js'
import Tbconfig from './config'

const params = reactive({
    folder_name: ""
})

onMounted(() => {
    console.log(1111)
    OSSgetDirectory()
})


const tableData = ref([])
const OSSgetDirectory = () => {
    api.OSSgetDirectory({ ...params }).then(res => {
        tableData.value = res.data.data
    })
}
const clickGet = (name) => {
    if (name.indexOf(".") == -1) {
        params.folder_name = params.folder_name + name + '/'
        console.log(params.folder_name)
        OSSgetDirectory()
    }
}

const clickBreadcrumb =(item)=>{
    params.folder_name = `${params.folder_name.split(item)[0]}${item}/`;
    OSSgetDirectory()
}
const backHome =()=>{
    params.folder_name = ""
    OSSgetDirectory()
}
</script>

<style scoped>
.layout-container-demo .el-header {
    position: relative;
    background-color: var(--el-color-primary-light-7);
    color: var(--el-text-color-primary);
}

.layout-container-demo .el-aside {
    color: var(--el-text-color-primary);
    background: var(--el-color-primary-light-8);
}

.layout-container-demo .el-menu {
    border-right: none;
}

.layout-container-demo .el-main {
    padding: 0;
}

.layout-container-demo .toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    right: 20px;
}
</style>